<template>
  <view class="padding-bottom-button">

    <view class="padding-30">
      <l-notice-bar v-if="authData" type="error" :list="[authData]" />

      <view class="card" :class="{'margin-top-16':authData}">
        <image-model :data="form" :list="imageList" @update="update" />
      </view>

      <view class="card margin-top-16">
        <view v-for="(item,index) in formList" :key="index">
          <l-form-cell
            v-model="form[item.attr]"
            :must = "item.must"
            label-width="240rpx"
            :label="item.label"
            :placeholder="item.toast"
            :has-slot="item.slot"
            :arrow="item.slot"
            :unlined="index === formList.length - 1"
            @click="changeData(item.attr)"
          >
            <l-city-picker v-if="item.attr === 'scopeName'" :value="form.scopeid" type="province" @change="setScope" />

            <text v-else class="text-30" :class="['color-t' + (form[item.attr] ? 1 : 3)]">{{ form[item.attr] || '请选择时间' }}</text>
          </l-form-cell>
        </view>
      </view>
    </view>

    <tui-datetime ref="dateTime" :cancel-color="colorError" :type="2" :show-cancel="!!cancelText" :cancel-text="cancelText" :end-year="2100" :set-date-time="setDateTime" @confirm="setDate" @cancel="setDate" />

    <safe-area-bottom />
    <l-bottom-button text="提交认证" :disabled="disabled" @click="submit" />
  </view>
</template>

<script>
import colors from '@/common/colors'
import { dateFormat, formVerify, loading } from '@/common/util'
import { getUserList, changeUser } from '@/common/api/user'
import { submitAutoCompanyCert, addAutoCompanyUser } from '../../api'
export default {
  name: 'CertForm',
  props: {
    type: {
      type: [String, Number],
      default: ''
    },
    authData: {
      type: String,
      default: ''
    },
    authInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      colorError: colors.colorError,
      cancelText: '',
      setDateTime: '',
      set: '',
      disabled: false,
      form: {
        licence: '', // 营业执业照图片路径
        idCard: '', // 法人身份证正面图片路径
        idCardBackground: '', // 法人身份证背面图片路径
        bank: '', // 开户行图片路径路径
        transportLicence: '', // 道路运输许可证图片路径
        safeLicence: '', // 安全标准化认证图片路径
        idCardName: '', // 真实姓名
        idCardValue: '', // 身份证号
        idCardValidDate: dateFormat(), // 身份证有效期开始时间
        idCardValidDateEnd: '', // 身份证有效期截止时间
        company: '', // 企业名称
        socialUnifiedCode: '', // 社会统一用户代码
        transportPermitName: '', // 业户名称
        scopeName: '', // 所属省份
        scopeid: [], // 所属省份ID
        transportPermitValidDate: dateFormat(), // 道路运输许可证有效期开始时间
        transportPermitValidDateEnd: ''// 道路运输许可证有效期截止时间
      },
      verifyList: [
        { toast: '请上传法人身份证正面', attr: 'idCard'  ,must:true},
        { toast: '请上传法人身份证背面', attr: 'idCardBackground'  ,must:true},
        { toast: '请上传营业执照副本', attr: 'licence' ,must:true },
        { toast: '请上传道路运输经营许可证', attr: 'transportLicence'  ,must:true},
        { toast: '请输入法人姓名', attr: 'idCardName', label: '法人姓名', slot: false  ,must:true},
        { toast: '请输入身份证号', attr: 'idCardValue', label: '身份证号', slot: false  ,must:true},
        { toast: '请选择身份证有效期', attr: 'idCardValidDateEnd', label: '身份证有效期至', slot: true  ,must:true},
        { toast: '请输入企业名称', attr: 'company', label: '企业名称', slot: false  ,must:true},
        { toast: '请输入统一社会信用代码', attr: 'socialUnifiedCode', label: '统一社会信用代码', slot: false  ,must:true, length: 18},
        { toast: '请选择道路运输经营许可证有效期', attr: 'transportPermitValidDateEnd', label: '道路运输经营许可证有效期至', slot: true  ,must:true},
        { toast: '请选择所属省份', attr: 'scopeName', label: '所属省份', slot: true  ,must:true}
      ],
	  verifyListCv: [
	    { toast: '请上传法人身份证正面', attr: 'idCard'  ,must:true},
	    { toast: '请上传法人身份证背面', attr: 'idCardBackground'  ,must:true},
	    { toast: '请上传营业执照副本', attr: 'licence' ,must:true },
	    { toast: '请上传道路运输经营许可证', attr: 'transportLicence'  ,must:true},
	    { toast: '请输入法人姓名', attr: 'idCardName', label: '法人姓名', slot: false  ,must:true},
	    { toast: '请输入身份证号', attr: 'idCardValue', label: '身份证号', slot: false  ,must:true},
	    { toast: '请选择身份证有效期', attr: 'idCardValidDateEnd', label: '身份证有效期至', slot: true  ,must:true},
	    { toast: '请输入企业名称', attr: 'company', label: '企业名称', slot: false  ,must:true},
	    { toast: '请输入统一社会信用代码', attr: 'socialUnifiedCode', label: '统一社会信用代码', slot: false  ,must:true},
	    { toast: '请输入业户名称', attr: 'transportPermitName', label: '业户名称', slot: false  ,must:false},
	    { toast: '请选择道路运输经营许可证有效期', attr: 'transportPermitValidDateEnd', label: '道路运输经营许可证有效期至', slot: true  ,must:true},
	    { toast: '请选择所属省份', attr: 'scopeName', label: '所属省份', slot: true  ,must:true}
	  ],
      imageList: [
        { attr: 'idCard', label: '法人身份证正面', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb-portal/static/idcard.png', must: true },
        { attr: 'idCardBackground', label: '法人身份证背面', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb-portal/static/idcardback.png', must: true },
        { attr: 'licence', label: '营业执照副本', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb-portal/static/singshizheng.png', must: true },
        { attr: 'transportLicence', label: '道路运输经营许可证', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb-portal/static/zigezheng.png', must: true },
        { attr: 'bank', label: '开户行', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb-portal/static/zigezheng.png', must: false },
        { attr: 'safeLicence', label: '安全标准化认证', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb-portal/static/zigezheng.png', must: false }
      ]
    }
  },
  computed: {
    formList() {
      return this.verifyListCv.filter(item => item.label)
    }
  },
  watch: {
    authInfo(e) {
      Object.keys(this.form).forEach(key => {
        this.form[key] = e[key]
      })
    }
  },
  methods: {
    update(e) {
      Object.assign(this.form, e)
    },
    changeData(e) {
      if (e === 'idCardValidDateEnd' || e === 'transportPermitValidDateEnd') this.showDate(e)
    },
    // 显示时间选择器
    showDate(attr) {
      if (attr === 'idCardValidDateEnd') this.cancelText = '长期'
      else this.cancelText = ''

      if (this.form[attr] && this.form[attr] !== '长期') this.setDateTime = this.form[attr]
      else this.setDateTime = dateFormat()

      if (this.set !== attr) this.$refs.dateTime.initData()

      this.set = attr
      this.$refs.dateTime.show()
    },
    // 修改所属省份
    setScope(e) {
      this.form.scopeid = [e.value]
      this.form.scopeName = e.label
    },
    // 确认修改的日期
    setDate(e) {
      this.form[this.set] = e ? e.result : '长期'
    },
    // 提交认证
    async submit() {
      if (formVerify(this.form, this.verifyList)) {
        const send = this.copyData(this.form)
        send.scopeid = JSON.stringify(send.scopeid)
        if (send.idCardValidDateEnd === '长期') send.idCardValidDateEnd = ''
		if (send.idCardValue.length > 18) {
			this.toast('身份证号最多输入18位')
			return false
		}
        this.disabled = true
        const l = loading('提交中...')

        let api = submitAutoCompanyCert
        if (this.type) {
          api = addAutoCompanyUser
          Object.assign(send, {
            agentUserId: ''
          })
        }
        const [err, res] = await api(send)

        this.disabled = false
        l.hide()

        if (!this.$http.errorCheck(err, res)) return false
        this.toast('提交认证成功')
        this.$emit('success')

        if (this.type) await this.getUserList()
      }
    },
    // 获取身份列表
    async getUserList() {
      const [err, res] = await getUserList({
        identityTypes: 'autoCompany'
      })
      if (!this.$http.errorCheck(err, res)) return false
      const list = res.data.data

      list.forEach(item => {
        if (item.identityType === 'autoCompany') {
          this.changeUser(item.userId)
          return
        }
      })
    },
    // 切换身份
    async changeUser(userId) {
      const [err, res] = await changeUser({ userId })
      if (!this.$http.errorCheck(err, res)) return false
      if (res.data.access_token) {
        this.login.saveLoginInfo(res)
      }
    }
  }
}
</script>

<style scoped>

</style>
